<!--
 * @Author: scl
 * @Date: 2023-09-14 21:10:37
 * @LastEditTime: 2023-09-14 21:56:55
 * @Description: file content
-->
<script setup lang="ts">
import type { categoryPanelItem } from '@/types/home';
import { defineProps } from 'vue';
defineProps<{ list: categoryPanelItem[] }>()
</script>

<template>
    <view class="category">
        <navigator class="category-item" hover-class="none" url="/pages/index/index" v-for="item in list" :key="item.id">
            <image class="icon" :src="item.icon">
            </image>
            <text class="text">{{ item.name }}</text>
        </navigator>
    </view>
</template>

<style lang="scss">
/* 前台类目 */
.category {
    margin: 20rpx 0 0;
    padding: 10rpx 0;
    display: flex;
    flex-wrap: wrap;
    min-height: 328rpx;
    background-color: #f7f7f7;

    .category-item {
        width: 150rpx;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;

        .icon {
            width: 100rpx;
            height: 100rpx;
        }

        .text {
            font-size: 26rpx;
            color: #666;
        }
    }
}
</style>